<!-- 单个时间筛选 -->
<template>
<div class="dp_one">
     <el-date-picker
      v-model="value"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions"
      format="yyyy 年 MM 月 dd 日"
       value-format="yyyy-MM-dd"
      @change='choice'>
    </el-date-picker>
</div>
</template>

<script>
export default {
data() {
return {
   pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value: ''
}
},
//生命周期 - 创建完成（访问当前this实例）
created() {

},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {

},
methods:{
    //日期改变发生
choice(){
    this.toParent();
},
//时间传给父组件
 toParent () {
    this.$emit('fromChild', this.value);
 }
}
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.dp_one{
    margin-left: 2%;
}
</style>